<template>
	<view class="productDetails">
		<!-- 当滑动到一定位置时导航栏出现 -->
		<view v-if="scrollTop>370" class="productDetails_nav" :style="{height:(statusBarHeight+45)+'px'}">
			<view class="productDetails_nav_back" :style="{marginTop:(statusBarHeight+35)/2+'px'}" @click="getBack">
				<image src="../../static/image/icon/fanhuijian.png"></image>
			</view>
		</view>
		<!-- 头部 -->
		<view class="productDetails_top">
			<swiper class="swiper" circular="true" autoplay="true" @change="swiperChange">
				<swiper-item v-for="(swiper, index) in goodsData.images" :key="index">
					<image :src="$wanlshop.oss(swiper, 375,500)" mode="aspectFit" />
				</swiper-item>
			</swiper>
			<view class="indicator">{{ currentSwiper + 1 }}/{{ goodsData.images.length }}</view>
			<!-- <image src="../../static/image/class/tu7.png"></image> -->
			<view class="productDetails_top_back" :style="{top:(statusBarHeight)+'px'}" @click="getBack">
				<image src="../../static/image/icon/fanhui.png"></image>
			</view>
		</view>
		<!-- 显示价格详情 -->
		<view class="productDetails_content">
			<view class="productDetails_content_price">
				<view class="price_left" v-if="goodsData.is_DC==2">
					<text class="price1">￥</text>
					<text class="price2" >{{DCprice1 || '0.00'}}</text>
					<text class="price1" >.{{DCprice2 || 0.0}}</text>
					<text class="price3">￥{{goodsData.market_price}}</text>
					<text class="price4">已售出{{goodsData.sales}}件</text>
				</view>
				<view class="price_left" v-else>
					<text class="price1">￥</text>
					<text class="price2" >{{price1 || '0.00'}}</text>
					<text class="price1" >.{{price2 || 0.0}}</text>
					<text class="price3">￥{{goodsData.market_price}}</text>
					<text class="price4">已售出{{goodsData.sales}}件</text>
				</view>

				<view class="price_right">
					<text class="price5 isactive" v-if="goodsData.follow" @tap="follow">已收藏</text>
					<text class="price5 " v-else @tap="follow">未收藏</text>
				</view>

			</view>
			<view class="narration">{{goodsData.title || '加载中...'}}</view>
			<!-- 服务 -->
			<view class="service">
				<view class="service_item">
					<image src="../../static/image/class/zhengque.png"></image>
					<text>送货上门</text>
				</view>
				<view class="service_item">
					<image src="../../static/image/class/zhengque.png"></image>
					<text>安装服务</text>
				</view>
				<view class="service_item">
					<image src="../../static/image/class/zhengque.png"></image>
					<text>闪电发货</text>
				</view>
				<view class="service_item">
					<image src="../../static/image/class/zhengque.png"></image>
					<text>贴心售后</text>
				</view>
			</view>
			<!-- 款式 -->
			<view class="parameter" @click="getSpecifications">
				<view class="parameter_item">
					<view class="parameter_item1">款式</view>
					<view class="parameter_item2" v-if="canCount">
						选择
						<text v-for="(item, index) in goodsData.spu" :key="item.id"> {{ item.name }}</text>
					</view>
					<view class="parameter_item2" v-else>
						已选
						<text>{{ selectArr.join(' / ')}}</text>
					</view>
				</view>
				<view class="parameter_item_back">
					<image src="../../static/image/class/jinru.png"></image>
				</view>

			</view>

			<!-- 参数 -->
			<view class="parameter" @click="getParameter">
				<view class="parameter_item">
					<view class="parameter_item1">参数</view>
					<view class="parameter_item2"></view>
				</view>
				<view class="parameter_item_back">
					<image src="../../static/image/class/jinru.png"></image>
				</view>
			</view>
			<!-- 图文详情 评价-->
			<view class="Graphic_details">
				<view class="Graphic_details_nav">
					<view class="text" :class="{'bg_text':isColor==index}" v-for="(item,index) in nav" :key="index"
						@click="getNav(index)">{{item.name}} <text v-if="item.name=='评价'">({{total}})</text></view>

				</view>
				<!-- 图文详情 展示-->
				<view class="Graphic_details_item" v-if="show==0">
					<!-- <image src="../../static/image/class/tuwen.png"></image> -->
					<rich-text :nodes="goodsData.content"></rich-text>
				</view>
				<!-- 评价 -->
				<view class="Graphic_details_evaluates" v-if="show==1">
					<view class="Graphic_details_evaluate" v-for="(item, index) in listData" :key="item.id">
						<view class="Graphic_details_evaluate_info">
							<view class="Graphic_details_evaluate_info_left">
								<view class="head_portrait">
									<image :src="$wanlshop.oss(item.user.avatar, 26, 26, 2, 'avatar')" ></image>
								</view>
								<view class="name">
									<view class="name1">{{ item.user.nickname }}</view>
									<view class="Star">
										<wanl-rate :current="item.score_logistics" :disabled="true"></wanl-rate>

										<text>{{item.score_logistics}}.0</text>
									</view>
								</view>
							</view>
							<view class="Graphic_details_evaluate_info_right">{{item.createtime}}</view>
						</view>
						<view class="Graphic_details_evaluate_item">{{ item.content }}
						</view>
						<!-- 展示图片 -->
						<view class="Graphic_details_evaluate_image">
							<view class="image1" v-for="(image, index) in item.images" @click="clickImg(item)">
								<image :src="$wanlshop.oss(image, 88, 88)" mode="aspectFill"></image>
							</view>

						</view>
						<!-- 回复的内容 -->
						<view class="Graphic_details_evaluate_reply" v-if="item.reply!='' ">
							<view class="name">小米回复</view>
							<view class="item">{{item.reply}}</view>
						</view>
						<!-- 浏览次数 -->
						<view class="Number_of ">
							<text>浏览</text>
							<text>{{item.views}}</text>
						</view>
					</view>
					<uni-load-more :status="status" :content-text="contentText" />
				</view>
			</view>
		</view>
		<!-- 底部加入购物车 -->
		<view class="productDetails_bottom">
			<view class="productDetails_bottom_left" @click="getPhone">
				<image src="../../static/image/class/kefu.png"></image>
			</view>
			<view class="productDetails_bottom_right">
				<view class="cart1" @tap="getSpecifications1('addToCart')">加入购物车</view>
				<view class="cart2" @tap="getSpecifications1('placeOrder')">立即购买</view>
			</view>
		</view>
		<!-- 选择规格 -->
		<popup-bottom :show="popupShow" @close="handleClose">
			<view class="popup-content">
				<view class="popup-content_item">
					<view class="item_left">
						<view class="item_left_img">
							<image :src="$wanlshop.oss(goodsData.image, 100, 100)" mode=""></image>
						</view>
						<view class="item_left_price">
							<view class="price" v-if="goodsData.is_DC==2">
								￥{{ selectshop.DCprice || goodsData.interval_price }}</view>
							<view class="price" v-else>
								￥{{ selectshop.price || goodsData.interval_price }}</view>

							<view class="stock">
								库存
								<text class="margin-lr-xs">{{ selectshop.stock || 0 }}</text>
								件
							</view>
							<view class="model">
								<view class="model1" v-if="selectArr.join('')">已选择：{{ selectArr.join(' ') }}</view>
								<view class="model1" v-else>
									请选择：
									<text class="wanl-gray-light" v-for="(item, index) in goodsData.spu" :key="item.id">
										<block v-if="index != 0">-</block>
										{{ item.name }}
									</text>
								</view>
							</view>
						</view>
					</view>
					<view class="ite_right iconfont icon-close" @click="handleClose"></view>
				</view>
				<!-- 颜色 -->
				<view class="popup-content_item1">
					<scroll-view scroll-y="true">
						<view class="opt " v-for="(value, spukey) in goodsData.spu" :key="value.id">
							<view class="text-df">{{ value.name }}</view>
							<view class="tag">
								<view class="cu-tag" v-for="(item, index) in value.item" :key="index"
									:class="[item.ishow ? '' : 'noactive', subIndex[spukey] == index ? 'active' : '']"
									@tap="skuClick(item, spukey, $event, index)">
									{{ item.name }}
								</view>
							</view>
						</view>
						<view class="number padding-bj">
							<view class="text-df">购买数量</view>
							<uni-number-box :min="1" :max="selectshop.stock" :value="selectNum" :disabled="canCount"
								@change="changeNum"></uni-number-box>
						</view>
					</scroll-view>
				</view>
				<!-- 加入购物车 立即购买 -->
				<view class="foot">
					<view v-if="isChoice" class="cu-btn bg-gradual-yellow1" @tap="completeSelection">完成</view>
					<block v-else>
						<view class="cu-btn bg-gradual-yellow " @tap="SubmitData('addToCart', 1)">加入购物车</view>
						<view class="cu-btn bg-gradual-orange " @tap="SubmitData('placeOrder', 1)">立即订购</view>
					</block>
				</view>
			</view>
		</popup-bottom>
		<!-- 选择参数 -->
		<popup-bottom :show="popupShow1" @close="handleClose1">
			<view class="popup-content1">
				<view class="text-lg">
					产品参数
				</view>

				<scroll-view class="scroll-y" scroll-y="true">
					<view class="solid-bottom">
						<view class="name">品牌</view>
						<view class="value">{{ goodsData.brand.name }}</view>
					</view>
					<view class="solid-bottom" v-for="(item, index) in goodsData.category_attribute" :key="index">
						<view class="name">{{ index }}</view>
						<view class="value">{{ item }}</view>
					</view>
				</scroll-view>
				<view class="padding-lr-bj" @tap="hideModal">完成</view>
			</view>
		</popup-bottom>
	</view>
</template>

<script>
	import wanlRate from '../../components/wanl-rate/wanl-rate.vue'
	import PopupBottom from '@/components/popup-bottom/popup-bottom.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		data() {
			return {
				// 弹框显示隐藏
				popupShow: false,
				popupShow1: false,
				currentSwiper: 0, // 轮播图右下角数字
				// 收藏改变颜色
				isactive: false,

				// 监听滚动的高
				scrollTop: 0,
				// 导航栏高度
				statusBarHeight: 0,
				show: 0,
				//图文详情 评价
				nav: [{
						id: 0,
						name: '图文详情'
					},
					{
						id: 1,
						name: '评价'
					}
				],
				// 导航改变字体颜色
				isColor: 0,
				// 获取商品id
				shop_id: '',
				//产品数据
				goodsData: {
					id: 0,
					category_id: 0,
					shop_id: 0,
					brand_id: 0,
					freight_id: 0,
					title: '',
					image: '',
					images: '',
					DCprice: null,
					flag: '',
					content: '',
					category_attribute: [],
					activity: false,
					price: null,
					interval_price: null,
					market_price: null,
					sales: 0,
					brand: {},
					freight: {
						name: '',
						isdelivery: 1
					},
					payment: 0,
					comment: 0,
					praise: 0,
					moderate: 0,
					negative: 0,
					like: 0,
					views: 0,
					status: '',
					category: {},
					follow: true,
					sku: [],
					spu: [],
					promotion: [],
					coupon: [],
					comment_list: {
						data: [],
						figure: 0,
						tag: []
					},
					shop: {
						city: ''
					},
					shop_recommend: {}
				},
				selectArr: [], //存放被选中的值
				subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
				shopItemInfo: {}, //存放要和选中的值进行匹配的数据
				selectshop: {}, //存放最后选中的商品
				selectNum: 1, //选中数量
				isChoice: '', // 是否从选择进入
				scrollAnimation: 0, //分享滚动
				// 判断是否是ui设计师 0 是客户，1是设计室审核，2是设计师
				is_DC: '',
				reload: false, //判断是否上拉
				total: 0, //数据量
				current_page: 1, //当前页码
				last_page: 1, //总页码
				// 评价数据
				listData: [],
				contentText: {
					contentdown: ' ',
					contentrefresh: '加载中',
					contentnomore: ''
				},
				// 游客价格
				price1:'',
				price2:'',
				// 设计师价格
				DCprice1:'',
				DCprice2:''
			};
			
		},
		computed: {
			canCount() {
				return this.subIndex.some(item => item === -1);
			},
		},
		components: {
			wanlRate,
			PopupBottom,
			uniLoadMore

		},
		watch: {
			selectshop(n, o) {
				if (this.goodsData.is_DC == 2) {
					if (n.DCprice != o.DCprice) {
						this.queryCoupon(n.DCprice);
						// 更新一次优惠券
						console.log('n1', n);
						console.log('o1', o);
					}
				} else {
					if (n.price != o.price) {
						this.queryCoupon(n.price);
						// 更新一次优惠券
						console.log('n', n);
						console.log('o', o);
					}
				}



			}
		},
		methods: {
			// 放大预览图片
			clickImg(item){
				console.log('item',item);
				this.$api.get({
					url: '/wanlshop/common/commentView',
					data: {
						id:item.id
					},
					success: res => {
						console.log('点击次数res',res)
					}
				});
				uni.previewImage({
				// this.$wanlshop.oss(item.image, 88, 88)
				urls:item.images, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				
				current:'', // 当前显示图片的http链接，默认是第一个
				
				success: function(res) {
					console.log('1213')
				},
				
				fail: function(res) {},
				
				complete: function(res) {},
				
				})
			},
			// 弹框关闭
			handleClose() {
				this.popupShow = false;
				// console.log('sdgdfhfj')
			},
			handleClose1() {
				this.popupShow1 = false;
			},
			// 选择参数
			getParameter() {
				this.popupShow1 = true;
			},
			// 选择规格
			getSpecifications() {
				this.popupShow = true;
				this.isChoice = '';
				// console.log('wfwg');
			},
			getSpecifications1(type) {
				this.popupShow = true;
				this.isChoice = type;

			},

			// 关闭弹出层
			hideModal() {
				this.popupShow1 = false

			},
			//返回上一页
			getBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 关注 & 取消
			follow() {
				console.log('2342')
				// this.isactive = !this.isactive
				this.goodsData.follow = !this.goodsData.follow;
				// 全局控制中心
				if (this.goodsData.follow) {
					this.$store.commit('statistics/dynamic', {
						collection: this.$store.state.statistics.dynamic.collection + 1
					});
				} else {
					this.$store.commit('statistics/dynamic', {
						collection: this.$store.state.statistics.dynamic.collection - 1
					});
				}
				this.$api.post({
					url: '/wanlshop/product/follow',
					data: {
						id: this.goodsData.id
					},
					success: res => {
						this.goodsData.follow = res;
					}
				});
			},
			// 完成选择
			completeSelection() {

				if (this.canCount) {
					this.$wanlshop.msg('请选择完成规格');
				} else {
					this.ProcessingData();
				}
			},
			ProcessingData() {
				if (this.isChoice == 'addToCart') {
					if (this.goodsData.is_DC == 2) {
						this.$store.dispatch('cart/add', {
							shop_id: this.goodsData.shop_id,
							shop_name: this.goodsData.shop.shopname,
							goods_id: this.goodsData.id,
							title: this.goodsData.title,
							number: this.selectNum,
							image: this.goodsData.image,
							sku: this.selectshop,
							is_DC: this.goodsData.is_DC,
							sku_id: this.selectshop.id,
							sum: this.$wanlshop.bcmul(this.selectshop.DCprice, this.selectNum)
						});
					} else {
						this.$store.dispatch('cart/add', {
							shop_id: this.goodsData.shop_id,
							shop_name: this.goodsData.shop.shopname,
							goods_id: this.goodsData.id,
							title: this.goodsData.title,
							number: this.selectNum,
							image: this.goodsData.image,
							sku: this.selectshop,
							sku_id: this.selectshop.id,
							is_DC: this.goodsData.is_DC,
							sum: this.$wanlshop.bcmul(this.selectshop.price, this.selectNum)
						});
					}

					this.$wanlshop.msg('已加购物车');
					this.popupShow = false
					console.log('addToCart')
				} else if (this.isChoice == 'placeOrder') {
					console.log('placeOrder')
					let goodsData = [{
						goods_id: this.goodsData.id,
						number: this.selectNum,
						sku_id: this.selectshop.id
					}];
					// 提交订单
					if (this.$store.state.user.isLogin) {

						uni.redirectTo({
							url: `../placeOrder/placeOrder?type=goods&data=${JSON.stringify(goodsData)}`
						});
					} else {
						this.$wanlshop.to('/pages/user/logo/logo');
					}

				} else {
					this.$wanlshop.msg('数据异常');
				}
				this.hideModal();
			},
			// 提交数据
			SubmitData(name, type) {
				// if (!this.subIndex[0]) {
				// this.$wanlshop.msg('客官先别急，系统还在加载');
				// } else {

				// }
				if (type == 1) {
					if (this.canCount) {
						this.$wanlshop.msg('请选择完成规格');
					} else {
						this.isChoice = name;
						this.popupShow = false
						this.ProcessingData();
					}
				} else {
					this.modalName = 'option';
					this.isChoice = name;
				}
			},
			// 通过点击图文详情 评价显示对应的数据
			getNav(index) {
				this.isColor = index;
				this.show = index;
				if (index == 1) {
					// 调用评价数据
					this.evaluate();
				}
			},
			//轮播图指示器
			swiperChange(e) {
				this.currentSwiper = e.detail.current;
			},
			// 计算系统屏幕的高度
			GetStatusBarHeight() {
				let that = this;
				uni.getSystemInfo({
					// 获取系统屏幕的高度
					success: function(res) {
						that.statusBarHeight = res.statusBarHeight;
						console.log('状态栏高度', res)
					},
				});
			},
			//循环所有属性判断哪些属性可选
			checkInpath(clickIndex) {

				//当前选中的兄弟节点和已选中属性不需要循环
				for (let i = 0, len = this.goodsData.spu.length; i < len; i++) {
					if (i == clickIndex) {
						continue;
					}
					let len2 = this.goodsData.spu[i].item.length;
					for (let j = 0; j < len2; j++) {
						if (this.subIndex[i] != -1 && j == this.subIndex[i]) {
							continue;
						}
						let choosed_copy = [...this.selectArr];
						this.$set(choosed_copy, i, this.goodsData.spu[i].item[j].name);
						let choosed_copy2 = choosed_copy.filter(item => item !== '' && typeof item !== 'undefined');
						if (this.shopItemInfo.hasOwnProperty(choosed_copy2)) {
							this.$set(this.goodsData.spu[i].item[j], 'ishow', true);
						} else {
							this.$set(this.goodsData.spu[i].item[j], 'ishow', false);
						}
					}
				}
				// console.log(this.goodsData.spu)
			},
			// 查询优惠券，减缓服务器压力，单独查询
			async queryCoupon(price) {
				this.$api.post({
					url: '/wanlshop/coupon/query',
					data: {
						shop_id: this.goodsData.shop_id,
						goods_id: this.goodsData.id,
						shop_category_id: this.goodsData.shop_category_id,
						price: price
					},
					success: res => {
						this.goodsData.coupon = res;
					}
				});
			},
			// 领取优惠券
			async onReceive(index) {
				let coupon = this.goodsData.coupon[index];
				this.$api.post({
					url: '/wanlshop/coupon/receive',
					loadingTip: '领取中',
					data: {
						id: coupon.id
					},
					success: res => {
						coupon.id = res.id;
						coupon.state = true;
						this.$wanlshop.msg(res.msg);
						// 更新状态管理器
						this.$store.commit('statistics/dynamic', {
							coupon: this.$store.state.statistics.dynamic.coupon + 1
						});
					}
				});
			},
			//商品规格修改数量
			changeNum(val) {
				this.selectNum = parseInt(val);
			},
			// 商品规格组合 选择
			skuClick(value, spukey, event, index) {
				console.log('value', value);
				if (value.ishow) {
					console.log('selectArr', this.selectArr)
					if (this.selectArr[spukey] != value.name) {
						this.$set(this.selectArr, spukey, value.name);
						this.$set(this.subIndex, spukey, index);
					} else {
						this.$set(this.selectArr, spukey, '');
						this.$set(this.subIndex, spukey, -1);
					}
					console.log('subIndex', this.subIndex);
					console.log('spukey', spukey)
					this.checkInpath(spukey);
					//如果全部选完
					if (this.selectArr.every(item => item != '')) {
						this.selectshop = this.shopItemInfo[this.selectArr];
						this.selectNum = 1;
					}
				}
			},
			//计算有多小种可选路径
			checkItem() {
				let result = this.goodsData.sku.reduce(
					(arrs, items) => {
						return arrs.concat(
							items.difference.reduce(
								(arr, item) => {
									return arr.concat(
										arr.map(item2 => {
											//利用对象属性的唯一性实现二维数组去重
											if (!this.shopItemInfo.hasOwnProperty([...item2, item])) {
												this.shopItemInfo[[...item2, item]] = items;
											}
											return [...item2, item];
										})
									);
								},
								[
									[]
								]
							)
						);
					},
					[
						[]
					]
				);
			},

			async loadData() {
				console.log('shop_id', this.shop_id)
				//加载商品
				this.$api.get({
					url: '/wanlshop/product/goods',
					data: {
						id: this.shop_id
					},
					success: res => {
						console.log('res12', res)

						// 详情正则
						res.content = res.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match,
							capture) => {
							var img =
								`<img style="display: block; max-width: 100%;" src="${this.$wanlshop.oss(capture, 500, 0)}">`;
							return img;
						});
						// 价格区间
						if (res.sku.length == 0) {
							res.interval_price = res.price;
							res.market_price = res.price;
							res.DCprice = res.DCprice;
						} else {
							if (res.is_DC == 2) {
								let price = [],
									market_price = [];
								for (let value of res.sku) {
									price.push(value.DCprice);
									market_price.push(value.market_price);
								}
								let minPrice = Math.min.apply(null, price),
									maxPrice = Math.max.apply(null, price),
									maxMarketPrice = Math.max.apply(null, market_price);
								res.interval_price = minPrice == maxPrice ? minPrice : minPrice + '-' +
									maxPrice; //区间价格
								res.market_price = Number(maxMarketPrice).toFixed(2); //最大市场价
							} else {
								let price = [],
									market_price = [];
								for (let value of res.sku) {
									price.push(value.price);
									market_price.push(value.market_price);
								}
								let minPrice = Math.min.apply(null, price),
									maxPrice = Math.max.apply(null, price),
									maxMarketPrice = Math.max.apply(null, market_price);
								res.interval_price = minPrice == maxPrice ? minPrice : minPrice + '-' + maxPrice; //区间价格
								res.market_price = Number(maxMarketPrice).toFixed(2); //最大市场价
							}

						}
						this.goodsData = res;
						// 价格截取
						this.price1=this.goodsData.price.split('.')[0];
						this.price2=this.goodsData.price.split('.')[1];
						this.DCprice1=this.goodsData.sku[0].DCprice.split('.')[0];
						this.DCprice2=this.goodsData.sku[0].DCprice.split('.')[1];
						// 	// 商品规格组合
						this.goodsData.spu.map(item => {
							this.selectArr.push('');
							this.subIndex.push(-1);
						});
						this.checkItem(); //计算sku里面规格形成路径
						this.checkInpath(-1); //传-1是为了不跳过循环
						// 计算锚点高度
						// setTimeout(() => {
						// 	this.calcAnchor();
						// }, 1000);
					}
				});
			},
			// 加载评价数据
			async evaluate() {
				//加载商品
				this.$api.get({
					url: '/wanlshop/product/comment',
					data: {
						id: this.shop_id,
						page: this.current_page,
						tag: ''
					},
					success: res => {
						this.listData = [];
						console.log('评价', res)
						uni.stopPullDownRefresh();
						this.listData = this.reload ? res.comment.data : this.listData.concat(res.comment
							.data); //评论数据 追加
						this.total = res.comment.total; //数据量
						this.current_page = res.comment.current_page; //当前页码
						this.last_page = res.comment.last_page; //总页码

						this.status = res.comment.total == 0 ? 'noMore' : 'more';
						if (this.listData.length != 0) {
							// 将时间戳转换成日期
							for (var i = 0; i < this.listData.length; i++) {
								var a = this.listData[i].createtime;
								let date = new Date(a * 1000);
								console.log('date:', date);
								var y = date.getFullYear();
								var m = date.getMonth() + 1;
								m = m < 10 ? ('0' + m) : m;
								var d = date.getDate();
								var d = d < 10 ? ('0' + d) : d;
								var h = date.getHours();
								h = h < 10 ? ('0' + h) : h;
								var minute = date.getMinutes();
								var second = date.getSeconds();
								minute = minute < 10 ? ('0' + minute) : minute;
								second = second < 10 ? ('0' + second) : second;
								this.listData[i].createtime = y + '-' + m + '-' + d
								// console.log('aa',y+'-'+m+'-'+d+' '+h+":"+minute+":"+second)
							}
						}






					}
				});
			},
			//拨打客服电话
			getPhone() {
				uni.makePhoneCall({
					// 手机号
					phoneNumber: '0574-87880789',
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				})

			},
		},
		onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.current_page = this.current_page + 1; //页码+1
				this.status = 'loading';
				this.evaluate();
			}
		},
		onPullDownRefresh() {
			this.current_page = 1;
			this.reload = true;
			this.evaluate();
		},
		// 监听滚动的位置
		onPageScroll(Object) {
			// console.log('滚动',Object);		 
			this.scrollTop = Object.scrollTop;
			// console.log('滚动位置',Object.scrollTop);//实时获取到滚动的值
		},
		onLoad(option) {
			//调用系统屏幕尺寸函数
			this.GetStatusBarHeight();
			var gress = JSON.parse(decodeURIComponent(option.gress));
			this.shop_id = gress.id;
			console.log('gress', gress)
			var user = this.$store.state.user;
			this.is_DC = user.is_DC;
			console.log('user', this.is_DC)
			this.loadData();
			// 加载评价数据
			this.evaluate();
		}
	}
</script>

<style lang="scss">
	@mixin flex-center-row {
		display: flex;
		flex-direction: row;
	}

	@mixin flex-center-column {
		display: flex;
		flex-direction: column;
	}

	@mixin flex-center {
		justify-content: center;
		align-items: center;
	}

	.productDetails {

		.productDetails_nav {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			background-color: #FFFFFF;
			z-index: 9999;

			&_back {
				z-index: 99999;
				margin-left: 15rpx;
				display: flex;
				align-items: center;
				// background-color: pink;
				width: 50rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		&_top {
			position: relative;
			// margin-top: 50rpx;
			width: 750rpx;
			height: 1000rpx;
			// background-color: red;

			.swiper {
				width: 750rpx;
				height: 1000rpx;

				// background-color: pink;
				image {
					width: 100%;
					height: 100%;
				}
			}


			.indicator {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 25upx;
				height: 40upx;
				border-radius: 40upx;
				font-size: 22upx;
				position: absolute;
				bottom: 20upx;
				right: 20upx;
				color: #fff;
				background-color: rgba(0, 0, 0, 0.2);
			}

			&_back {
				position: absolute;
				// top: 20rpx;
				left: 15rpx;
				z-index: 999;
				// background-color: pink;
				height: 85rpx;
				line-height: 90rpx;
				display: flex;
				align-items: center;
				// justify-content: flex-end;
				width: 60rpx;

				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}

		&_content {

			// background-color: pink;
			// padding: 15rpx;
			&_price {
				// background-color: green;
				display: flex;
				margin-top: 20rpx;
				margin-left: 20rpx;
				align-items: center;
				justify-content: space-between;

				.price_left {
					.price1 {
						font-size: 26rpx;
						color: #ff0015;
						font-weight: 700;
					}

					.price2 {
						font-size: 32rpx;
						color: #ff0015;
						font-weight: 700;
					}

					.price3 {
						font-size: 24rpx;
						color: #c0c0c0;
						text-decoration: line-through;
						margin-left: 8rpx;
					}

					.price4 {
						font-size: 24rpx;
						color: #c0c0c0;
						margin-left: 20rpx;
					}
				}

				.price_right {
					margin-right: 20rpx;

					.price5 {
						font-size: 24rpx;
						display: inline-block;
						width: 80rpx;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						color: #c0c0c0;
						// background-color: pink;
						// margin-left: 170rpx;
					}

					.isactive {
						color: #ff0015;
					}
				}



			}

			.narration {
				margin: 20rpx;
				// background-color:red;
				font-size: 32rpx;
				color: #282828;
				font-weight: 600;
				// 多行显示超出部分显示省略号
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				word-break: break-all;
			}

			.service {
				background-color: #fef4f3;
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20rpx;
				box-sizing: border-box;
				margin-top: 40rpx;
				margin-bottom: 20rpx;


				.service_item {
					display: flex;
					align-items: center;

					image {
						width: 25rpx;
						height: 25rpx;
					}

					text {
						font-size: 24rpx;
						color: #888888;
						margin-left: 10rpx;
					}
				}
			}

			.parameter {
				// background-color: pink;
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20rpx;

				.parameter_item {
					display: flex;
					align-items: center;
					// background-color: #4CD964;
					// width: 400rpx;
					font-size: 26rpx;

					.parameter_item1 {
						color: #000000;
						// background-color: red;
						width: 130rpx;
					}

					.parameter_item2 {
						color: #888888;

						// background-color: pink;
						text {
							margin-left: 8rpx;
							// background-color: red;
						}

						// background-color: blue;
					}
				}

				.parameter_item_back {

					// background-color: green;
					image {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}

			.Graphic_details {
				background-color: #f0f0f0;
				// height: 500rpx;
				padding-top: 15rpx;
				margin-bottom: 100rpx;
				padding-bottom: 20rpx;

				.Graphic_details_nav {
					background-color: #FFFFFF;
					display: flex;
					align-items: center;
					height: 70rpx;

					.text {
						// background-color: red;
						font-size: 26rpx;
						color: #010101;
						width: 375rpx;
						text-align: center;
						font-weight: 600;
						// border-right: 1rpx solid blue;
					}

					.bg_text {
						color: #ff0015;
					}
				}

				// 图文详情
				.Graphic_details_item {
					// 
				}

				// 评价
				.Graphic_details_evaluates {
					margin-bottom: 20rpx;
					background-color: #FFFFFF;
					padding: 20rpx;

					.Graphic_details_evaluate {
						margin-bottom: 30rpx;

						&_info {
							// background-color: #cd65e3;
							display: flex;
							justify-content: space-between;
							align-items: center;

							&_left {
								display: flex;

								.head_portrait {
									// background-color:#4CD964 ;
									width: 80rpx;
									height: 80rpx;

									image {
										width: 80rpx;
										height: 80rpx;
										border-radius: 50%;
									}
								}

								.name {
									// background-color:#6cc9dd ;
									margin-left: 25rpx;

									.name1 {
										font-size: 28rpx;
										color: #282828;
										// font-weight: 900;
									}
								}

								.Star {
									image {
										width: 18rpx;
										height: 18rpx;
										margin-right: 5rpx;
									}

									text {
										font-size: 24rpx;
										color: #ff0015;
										margin-left: 10rpx;
									}
								}
							}

							&_right {
								font-size: 26rpx;
								color: #8c8b8b;
								margin-right: 10rpx;
							}
						}

						&_item {
							// background-color: pink;
							margin: 20rpx 0;
							font-size: 28rpx;
							color: #282828;
							// 多行显示超出部分显示省略号
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 5;
							word-break: break-all;
						}

						&_image {
							// width: 230rpx;
							// height: 230rpx;
							// background-color: pink;
							display: flex;
							// justify-content: space-between;
							flex-wrap: wrap;

							.image1 {
								// margin: ;
								margin-right: 20rpx;
								margin-bottom: 20rpx;

								image {
									width: 230rpx;
									height: 230rpx;
								}
							}

						}

						&_reply {
							background-color: #e9e9e9;
							border-radius: 8rpx;
							padding: 20rpx;

							.name {
								font-size: 24rpx;
								color: #7b7b7b;
								margin-bottom: 10rpx;
							}

							.item {
								font-size: 24rpx;
								color: #7b7b7b;
								// 多行显示超出部分显示省略号
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 5;
								word-break: break-all;
							}
						}

						.Number_of {
							// background-color: pink;
							margin-top: 10rpx;
							margin-bottom: 10rpx;

							text {
								font-size: 26rpx;
								color: #8c8b8b;
								margin-right: 5rpx;
							}
						}
					}
				}
			}

		}

		// 底部
		&_bottom {
			background-color: #FFFFFF;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			z-index: 9999;
			border-top: 1rpx solid #f0f0f0;

			&_left {
				// background-color: red;
				margin-left: 30rpx;

				image {
					width: 60rpx;
					height: 60rpx;
				}
			}

			&_right {
				display: flex;
				// background-color: green;
				align-items: center;
				margin-right: 20rpx;

				view {
					font-size: 28rpx;
					color: #FFFFFF;
					width: 180rpx;
					height: 70rpx;
					line-height: 70rpx;
					text-align: center;

				}

				.cart1 {
					border-radius: 50rpx 0 0 50rpx;
					background-color: #f2a51c;
				}

				.cart2 {
					border-radius: 0 50rpx 50rpx 0;
					background-color: #ff0015;
				}
			}
		}

		.popup-content {
			width: 715rpx;
			// height: 500rpx;
			@include flex-center-column;
			background-color: #FFFFFF;
			border-radius: 24rpx 24rpx 0 0;
			// height: 300rpx;
			padding: 10rpx 20rpx;

			.popup-content_item {
				// background-color: pink;
				display: flex;
				justify-content: space-between;
				// align-items: center;
				margin-top: 10rpx;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #f0f0f0;

				.item_left {
					// background-color: green;
					display: flex;
					align-items: center;

					.item_left_img {
						width: 180rpx;
						height: 180rpx;
						margin-right: 15rpx;

						image {
							width: 180rpx;
							height: 180rpx;
							border-radius: 20rpx;
						}
					}

					.item_left_price {
						font-size: 35rpx;
						color: #ff0015;
						margin-bottom: 5rpx;
					}

					.stock {
						font-size: 26rpx;
						color: #c0c0c0;
						margin-bottom: 5rpx;
					}

					.model {
						.model1 {
							font-size: 26rpx;
							color: #282828;
							margin-right: 5rpx;

							.wanl-gray-light {
								color: #c0c0c0;
							}
						}
					}
				}

				.iconfont {
					// background-color: blue;
					font-size: 35rpx;
					color: #c0c0c0;
					width: 35rpx;
					height: 35rpx;
				}
			}

			.popup-content_item1 {

				// background-color: pink;
				.opt {
					// background-color: red;
					padding-bottom: 20rpx;
					margin-bottom: 20rpx;
					border-bottom: 1rpx solid #f0f0f0;

					.text-df {
						font-size: 28rpx;
						color: #282828;
						margin-bottom: 10rpx;
					}

					.tag {
						display: flex;
						align-items: center;

						.cu-tag {
							// width: 75rpx;
							padding: 0 20rpx;
							height: 70rpx;
							line-height: 70rpx;
							text-align: center;
							border-radius: 10rpx;
							margin-right: 20rpx;
							background-color: #f5f5f5;
							font-size: 26rpx;
							color: #282828;
						}

						.noactive {
							color: #ff0015;
							border: 1rpx solid #ff0015;
							background-color: #ffffff;
						}

						.active {
							color: #ff0015;
							border: 1rpx solid #ff0015;
							background-color: #ffffff;
						}
					}
				}

				.number {
					display: flex;
					justify-content: space-between;

					.text-df {
						font-size: 28rpx;
						color: #282828;
					}
				}
			}

			.foot {
				// background-color: pink;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 40rpx 0 10rpx;
				font-weight: bold;

				.cu-btn {
					width: 350rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;

					font-size: 28rpx;
					color: #FFFFFF;
					border: none;
				}

				.bg-gradual-yellow1 {
					width: 700rpx;
					border-radius: 50rpx;
					background-color: #ff0015;
				}

				.bg-gradual-yellow {
					background-color: #f2a51c;
					border-radius: 50rpx 0 0 50rpx;
				}

				.bg-gradual-orange {
					border-radius: 0 50rpx 50rpx 0;
					background-color: #ff0015;
				}
			}
		}

		.popup-content1 {
			width: 715rpx;
			// height: 500rpx;
			@include flex-center-column;
			background-color: #FFFFFF;
			border-radius: 24rpx 24rpx 0 0;
			// height: 300rpx;
			padding: 10rpx 20rpx;

			.text-lg {
				font-size: 30rpx;
				// background-color: pink;
				margin: 20rpx auto;
				color: #282828;
			}

			.scroll-y {
				height: 600rpx;

				.solid-bottom {
					// background-color: pink;
					display: flex;
					align-items: center;
					font-size: 26rpx;
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid #f0f0f0;

					.name {
						color: #999999;
						margin-right: 60rpx;
					}

					.value {
						color: #282828;
					}
				}
			}

			.padding-lr-bj {
				background-color: #ff0015;
				width: 700rpx;
				margin: 20rpx auto;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #FFFFFF;
				font-weight: bold;
				border-radius: 50rpx;
			}
		}
	}
</style>
